/**
 * Created by levy on 16/6/15.
 */

{
    const r = React;

    /**
     * @desc [底部按钮 渲染单个]
     * @args [data]
     */
    const FooterBtnAlink = React.createClass({
        componentDidMount: function () {
            var props = this.props,
                dt = props.data,
                node = React.findDOMNode(this.refs.tabItem);

            //levy 操，这个事件意味着必须引入mui.js！！！
            node.addEventListener('tap', function ( event ){
                dt.clickHandler && dt.clickHandler( event, props.belong );
            }, !1);

            node.addEventListener('click', function ( event ){
                dt.clickHandler && dt.clickHandler( event, props.belong );
            }, !1);


            //active事件被禁用了？妈的，只好自己改写监听事件了
            node.addEventListener('touchstart', function (e) {
                this.style.background = '#eee';
            });
            node.addEventListener('touchend', function (e) {
                this.style.background = '#fff';
            });

        },
        render: function () {
            var dt = this.props.data;

            return (
                <a ref="tabItem" className={"mui-tab-item " + dt.aLinkClass} >{dt.text}</a>
            )
        }
    });

    /**
     * @desc [固定的底部按钮组件]
     * @args 
     *     [{aLinkClass, clickHandler, text}]  a的class,onclick处理函数,a内容
     * 例子:
     *  [
         {aLinkClass: 'green', clickHandler: this.showFeedback, text: '直接反馈'},
         {aLinkClass: 'red', clickHandler: this._Cancel, text: '退回'}
     *  ]
     */
    var FooterBtn = React.createClass({
        getInitialState: function () {
            return {
                //aLinkItems: {}
            }
        },
        componentWillMount: function () {
        },
        componentDidMount: function () {
            var footer_ele = r.findDOMNode(this.refs.footer);
            footer_ele.addEventListener('tap', function () {
                this.props.onBlurHandler && this.props.onBlurHandler();
            }.bind(this), !1);
        },
        render: function () {
            var aLinkItems = this.props.data.map(function (item,i) {
                return <FooterBtnAlink key={'footerBtn-'+i} data={item} belong={this.props.belong} />
            }.bind(this));

            var btnVisiable = this.props.visiable || '';

            return (
                <div className="footer-wrapper">
                    <footer ref="footer" className={"mui-bar mui-bar-tab bar-tab " + btnVisiable }>
                        {aLinkItems}
                    </footer>
                </div>
            )
        }
    });
}

export default FooterBtn;
